<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--
v-*
v-show : 切换 display: block | none
v-if
v-else-if
v-else

v-for
v-once
v-model :为表单创建双向数据绑定
  .number
  .trim
  .lazy: input => change
v-on:event
@event
  .stop
  .prevent
v-bind:attr
:attr
-->
<div id="app">
  <h1>count: {{ count }}</h1>
  <button @click="count++">count++</button>
  <hr>
  <my-counter
    v-for="item of 3"
    :index="item"
  ></my-counter>
</div>
<script src="vue.js"></script>
<script>
  // console.log(Vue.component)
  Vue.component('my-counter', {
    template: `<div>
                  <h1><i>{{ index }}. </i>my count: {{ count }}</h1>
                  <button @click="add">my count++</button>
              </div>`,
    props: ['index'],
    data() {
      return {
        count: 100,
      }
    },
    methods: {
      add() {
        this.count++
      }
    }
  })

  const app = new Vue({
    // el: '#app',
    data: {
      count: 0
    },
    methods: {},
    // template: '',
    // components: {},
    // props: {},
    // computed: {},
    // watch: {},
    // 生命周期函数 八个
  }).$mount('#app')
</script>

</body>
</html>